<template>
  <div class="ivz-basic-search">
    <div class="ivz-area-desc" v-if="funMetas.length == 0">
      <DragOutlined />可拖入功能组件
    </div>
    <draggable :list="funMetas" group="fun" class="ivz-ibs-fun">
      <template v-for="meta in funMetas" :key="meta.id">
        <ivz-btn-item class="ivz-item-draggable"
            :meta="meta" :type="type" @remove="removeSearchFunMeta(meta)"/>
      </template>
    </draggable>
    <a-form :labelCol="model.labelCol" :wrapperCol="model.wrapperCol">
      <div v-if="metas.length == 0" class="ivz-area-desc ivz-ibs-form">
        可通过编辑表单添加搜索字段
      </div>
      <draggable :list="metas" group="search" :animation='200' component="a-row" :gutter="6"
                 style="width: 100%; min-height: 88px" class="ivz-area-draggable">
        <template v-for="meta in metas" :key="meta.id">
          <ivz-search-item :meta="meta" :span="span"/>
        </template>
      </draggable>
    </a-form>
  </div>
</template>

<script>
import {mapGetters, mapMutations} from "vuex";
import IvzSearchItem from "@/components/item/IvzSearchItem.vue";
import {EventBus, EventType, FunEventType, MetaRemoveEvent} from "@/event";
import MetaUtils from "@/utils/MetaUtils";
import IvzBtnItem from "@/components/item/IvzBtnItem.vue";
import {ComponentType} from "@/store/consts";
import {getFunTabMetas} from "@/metas/FunTabMetas";

export default {
  name: "IvzBasicSearch",
  components: {IvzBtnItem, IvzSearchItem},
  computed: {
    ...mapGetters({
      metas: 'searchMetas',
      model: 'listTabModel',
      funMetas: 'searchFunMetas',
    }),
    span() {
      return 24 / this.model['column']
    }
  },
  data() {
    return {
      type: ComponentType.Search
    }
  },
  created() {
    EventBus.listener(EventType.toSearch, ({type, id, title, field}) => {
      let meta = {id, type, tabModel: {id, title, type, field: field || id}, active: false}
      this.updateSearchFormMetas(meta)
    });

    EventBus.listener(EventType.formTitle, ({val, id}) => {
      let meta = MetaUtils.getMetaById(this.metas, id);
      if(meta) {
        meta['tabModel']['title'] = val;
      }
    });

    EventBus.listener(EventType.formField, ({val, id}) => {
      let meta = MetaUtils.getMetaById(this.metas, id);
      if(meta) {
        meta['tabModel']['field'] = val;
      }
    });

    EventBus.listener(MetaRemoveEvent.delEditMeta, meta => {
      this.removeSearchFormMeta(meta);
    });
  },
  mounted() {
    // 监听功能组件事件(设置功能数据)
    EventBus.publish(FunEventType.searchFun, getFunTabMetas(ComponentType.Search));
  },
  methods: {
    ...mapMutations(['updateSearchFormMetas', 'removeSearchFormMeta', 'removeSearchFunMeta'])
  }
}
</script>

<style>
.ivz-area-desc {
  height: 38px;
  line-height: 38px;
}
.ivz-ibs-fun {
  width: 100%;
  height: 38px;
  padding: 3px;
  text-align: right;
  border-bottom: 1px solid #dddddd;
}
.ivz-ibs-form {
  top: 46%;
}
.ivz-basic-search {
  width: 100%;
  min-height: 168px;
  position: relative;
}
.ivz-basic-search .ant-form-item {
  margin-bottom: 8px;
}
</style>
